<!DOCTYPE html><html><head><title>Ext.form.field.Field | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.form.field.Field',
        docClass: 'Ext.form.field.Field',
        docReq: 'Ext.form.field.Field',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'Field.html#Ext-form.field.Field';
    clsInfo = {"methods":["batchChanges","checkChange","checkDirty","extractFileInput","getErrors","getModelData","getName","getSubmitData","getValue","initField","isDirty","isEqual","isFileUpload","isValid","reset","resetOriginalValue","setValue","validate"],"cfgs":["disabled","name","submitValue","validateOnChange","value"],"properties":["clearInvalid","isFormField","markInvalid","originalValue"],"events":["change","dirtychange","validitychange"],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Field.html#Ext-form.field.Field" target="_blank">Ext.form.field.Field</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>This mixin provides a common interface for the logical behavior and state of form fields, including:</p>

<ul>
<li>Getter and setter methods for field values</li>
<li>Events and methods for tracking value and validity changes</li>
<li>Methods for triggering validation</li>
</ul>


<p>*NOTE**: When implementing custom fields, it is most likely that you will want to extend the <a href="Ext.form.field.Base.html" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>
component class rather than using this mixin directly, as BaseField contains additional logic for generating an
actual DOM complete with <a href="Ext.form.Labelable.html" rel="Ext.form.Labelable" class="docClass">label and error message</a> display and a form input field,
plus methods that bind the Field value getters and setters to the input field's value.</p>

<p>If you do want to implement this mixin directly and don't want to extend <a href="Ext.form.field.Base.html" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, then
you will most likely want to override the following methods with custom implementations: <a href="Ext.form.field.Field.html#getValue" rel="Ext.form.field.Field#getValue" class="docClass">getValue</a>,
<a href="Ext.form.field.Field.html#setValue" rel="Ext.form.field.Field#setValue" class="docClass">setValue</a>, and <a href="Ext.form.field.Field.html#getErrors" rel="Ext.form.field.Field#getErrors" class="docClass">getErrors</a>. Other methods may be overridden as needed but their base
implementations should be sufficient for common cases. You will also need to make sure that <a href="Ext.form.field.Field.html#initField" rel="Ext.form.field.Field#initField" class="docClass">initField</a>
is called during the component's initialization.</p>
<div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-disabled" class="member f ni"><a href="Ext.form.field.Field.html#config-disabled" rel="config-disabled" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-cfg-disabled" class="viewSource">view source</a></div><a name="disabled"></a><a name="config-disabled"></a><a href="Ext.form.field.Field.html#" rel="config-disabled" class="cls expand">disabled</a><span> : Boolean</span></div><div class="description"><div class="short"><p>True to disable the field (defaults to false). Disabled Fields will not be
<a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">submitted</a>.</p></p>
</div><div class="long"><p>True to disable the field (defaults to false). Disabled Fields will not be
<a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">submitted</a>.</p></p>
</div></div></div><div id="config-name" class="member ni"><a href="Ext.form.field.Field.html#config-name" rel="config-name" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-cfg-name" class="viewSource">view source</a></div><a name="name"></a><a name="config-name"></a><a href="Ext.form.field.Field.html#" rel="config-name" class="cls expand">name</a><span> : String</span></div><div class="description"><div class="short">The name of the field (defaults to undefined). By default this is used as the parameter
name when including the field...</div><div class="long"><p>The name of the field (defaults to undefined). By default this is used as the parameter
name when including the <a href="Ext.form.field.Field.html#getSubmitData" rel="Ext.form.field.Field#getSubmitData" class="docClass">field value</a> in a <a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">form submit()</a>.
To prevent the field from being included in the form submit, set <a href="Ext.form.field.Field.html#submitValue" rel="Ext.form.field.Field#submitValue" class="docClass">submitValue</a> to <tt>false</tt>.</p>
</div></div></div><div id="config-submitValue" class="member ni"><a href="Ext.form.field.Field.html#config-submitValue" rel="config-submitValue" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-cfg-submitValue" class="viewSource">view source</a></div><a name="submitValue"></a><a name="config-submitValue"></a><a href="Ext.form.field.Field.html#" rel="config-submitValue" class="cls expand">submitValue</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Setting this to <tt>false</tt> will prevent the field from being
<a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">submitted</a> even when it is not disabled. Defaults to <tt>true</tt>.</p>
</div><div class="long"><p>Setting this to <tt>false</tt> will prevent the field from being
<a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">submitted</a> even when it is not disabled. Defaults to <tt>true</tt>.</p>
</div></div></div><div id="config-validateOnChange" class="member ni"><a href="Ext.form.field.Field.html#config-validateOnChange" rel="config-validateOnChange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-cfg-validateOnChange" class="viewSource">view source</a></div><a name="validateOnChange"></a><a name="config-validateOnChange"></a><a href="Ext.form.field.Field.html#" rel="config-validateOnChange" class="cls expand">validateOnChange</a><span> : Boolean</span></div><div class="description"><div class="short">Specifies whether this field should be validated immediately whenever a change in its value is detected.
Defaults to ...</div><div class="long"><p>Specifies whether this field should be validated immediately whenever a change in its value is detected.
Defaults to <tt>true</tt>. If the validation results in a change in the field's validity, a
<a href="Ext.form.field.Field.html#validitychange" rel="Ext.form.field.Field#validitychange" class="docClass">validitychange</a> event will be fired. This allows the field to show feedback about the
validity of its contents immediately as the user is typing.</p>


<p>When set to <tt>false</tt>, feedback will not be immediate. However the form will still be validated
before submitting if the <tt>clientValidation</tt> option to <a href="Ext.form.Basic.html#doAction" rel="Ext.form.Basic#doAction" class="docClass">Ext.form.Basic.doAction</a> is
enabled, or if the field or form are validated manually.</p>


<p>See also <a href="Ext.form.field.Base.html#checkChangeEvents" rel="Ext.form.field.Base#checkChangeEvents" class="docClass">Ext.form.field.Base.checkChangeEvents</a>for controlling how changes to the field's value are detected.</p>

</div></div></div><div id="config-value" class="member ni"><a href="Ext.form.field.Field.html#config-value" rel="config-value" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-cfg-value" class="viewSource">view source</a></div><a name="value"></a><a name="config-value"></a><a href="Ext.form.field.Field.html#" rel="config-value" class="cls expand">value</a><span> : Mixed</span></div><div class="description"><div class="short"><p>A value to initialize this field with (defaults to undefined).</p>
</div><div class="long"><p>A value to initialize this field with (defaults to undefined).</p>
</div></div></div></div><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-clearInvalid" class="member f ni"><a href="Ext.form.field.Field.html#property-clearInvalid" rel="property-clearInvalid" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-property-clearInvalid" class="viewSource">view source</a></div><a name="clearInvalid"></a><a name="property-clearInvalid"></a><a href="Ext.form.field.Field.html#" rel="property-clearInvalid" class="cls expand">clearInvalid</a><span> : Object</span></div><div class="description"><div class="short">Clear any invalid styles/messages for this field. Components using this mixin should implement
this method to update ...</div><div class="long"><p>Clear any invalid styles/messages for this field. Components using this mixin should implement
this method to update the components rendering to clear any existing messages.</p>


<p><b>Note</b>: this method does not cause the Field's <a href="Ext.form.field.Field.html#validate" rel="Ext.form.field.Field#validate" class="docClass">validate</a> or <a href="Ext.form.field.Field.html#isValid" rel="Ext.form.field.Field#isValid" class="docClass">isValid</a> methods to
return <code>true</code> if the value does not <i>pass</i> validation. So simply clearing a field's errors
will not necessarily allow submission of forms submitted with the <a href="Ext.form.action.Submit.html#clientValidation" rel="Ext.form.action.Submit#clientValidation" class="docClass">Ext.form.action.Submit.clientValidation</a>
option set.</p>

</div></div></div><div id="property-isFormField" class="member ni"><a href="Ext.form.field.Field.html#property-isFormField" rel="property-isFormField" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-property-isFormField" class="viewSource">view source</a></div><a name="isFormField"></a><a name="property-isFormField"></a><a href="Ext.form.field.Field.html#" rel="property-isFormField" class="cls expand">isFormField</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag denoting that this component is a Field. Always true.</p>
</div><div class="long"><p>Flag denoting that this component is a Field. Always true.</p>
</div></div></div><div id="property-markInvalid" class="member ni"><a href="Ext.form.field.Field.html#property-markInvalid" rel="property-markInvalid" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-property-markInvalid" class="viewSource">view source</a></div><a name="markInvalid"></a><a name="property-markInvalid"></a><a href="Ext.form.field.Field.html#" rel="property-markInvalid" class="cls expand">markInvalid</a><span> : Object</span></div><div class="description"><div class="short">Associate one or more error messages with this field. Components using this mixin should implement
this method to upd...</div><div class="long"><p>Associate one or more error messages with this field. Components using this mixin should implement
this method to update the component's rendering to display the messages.</p>


<p><b>Note</b>: this method does not cause the Field's <a href="Ext.form.field.Field.html#validate" rel="Ext.form.field.Field#validate" class="docClass">validate</a> or <a href="Ext.form.field.Field.html#isValid" rel="Ext.form.field.Field#isValid" class="docClass">isValid</a> methods to
return <code>false</code> if the value does <i>pass</i> validation. So simply marking a Field as invalid
will not prevent submission of forms submitted with the <a href="Ext.form.action.Submit.html#clientValidation" rel="Ext.form.action.Submit#clientValidation" class="docClass">Ext.form.action.Submit.clientValidation</a>
option set.</p>

</div></div></div><div id="property-originalValue" class="member ni"><a href="Ext.form.field.Field.html#property-originalValue" rel="property-originalValue" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-property-originalValue" class="viewSource">view source</a></div><a name="originalValue"></a><a name="property-originalValue"></a><a href="Ext.form.field.Field.html#" rel="property-originalValue" class="cls expand">originalValue</a><span> : Mixed</span></div><div class="description"><div class="short">The original value of the field as configured in the value configuration, or as loaded by
the last form load operatio...</div><div class="long"><p>The original value of the field as configured in the <a href="Ext.form.field.Field.html#value" rel="Ext.form.field.Field#value" class="docClass">value</a> configuration, or as loaded by
the last form load operation if the form's <a href="Ext.form.Basic.html#trackResetOnLoad" rel="Ext.form.Basic#trackResetOnLoad" class="docClass">trackResetOnLoad</a>
setting is <code>true</code>.</p>
</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-batchChanges" class="member f ni"><a href="Ext.form.field.Field.html#method-batchChanges" rel="method-batchChanges" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-batchChanges" class="viewSource">view source</a></div><a name="batchChanges"></a><a name="method-batchChanges"></a><a href="Ext.form.field.Field.html#" rel="method-batchChanges" class="cls expand">batchChanges</a>(
<span class="pre">Object fn</span>)
 : void</div><div class="description"><div class="short">A utility for grouping a set of modifications which may trigger value changes into a single
transaction, to prevent e...</div><div class="long"><p>A utility for grouping a set of modifications which may trigger value changes into a single
transaction, to prevent excessive firing of <a href="Ext.form.field.Field.html#change" rel="Ext.form.field.Field#change" class="docClass">change</a> events. This is useful for instance
if the field has sub-fields which are being updated as a group; you don't want the container
field to check its own changed state for each subfield change.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">fn</span> : Object<div class="sub-desc"><p>A function containing the transaction code</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-checkChange" class="member ni"><a href="Ext.form.field.Field.html#method-checkChange" rel="method-checkChange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-checkChange" class="viewSource">view source</a></div><a name="checkChange"></a><a name="method-checkChange"></a><a href="Ext.form.field.Field.html#" rel="method-checkChange" class="cls expand">checkChange</a> : void</div><div class="description"><div class="short">Checks whether the value of the field has changed since the last time it was checked. If the value
has changed, it:

...</div><div class="long"><p>Checks whether the value of the field has changed since the last time it was checked. If the value
has changed, it:</p>


<ol>
<li>Fires the <a href="Ext.form.field.Field.html#change" rel="Ext.form.field.Field#change" class="docClass">change event</a>,</li>
<li>Performs validation if the <a href="Ext.form.field.Field.html#validateOnChange" rel="Ext.form.field.Field#validateOnChange" class="docClass">validateOnChange</a> config is enabled, firing the
<a href="Ext.form.field.Field.html#validationchange" rel="Ext.form.field.Field#validationchange" class="docClass">validationchange event</a> if the validity has changed, and</li>
<li>Checks the <a href="Ext.form.field.Field.html#isDirty" rel="Ext.form.field.Field#isDirty" class="docClass">dirty state</a> of the field and fires the <a href="Ext.form.field.Field.html#dirtychange" rel="Ext.form.field.Field#dirtychange" class="docClass">dirtychange event</a>
if it has changed.</li>
</ol>

<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-checkDirty" class="member ni"><a href="Ext.form.field.Field.html#method-checkDirty" rel="method-checkDirty" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-checkDirty" class="viewSource">view source</a></div><a name="checkDirty"></a><a name="method-checkDirty"></a><a href="Ext.form.field.Field.html#" rel="method-checkDirty" class="cls expand">checkDirty</a> : void</div><div class="description"><div class="short">Checks the isDirty state of the field and if it has changed since the last time
it was checked, fires the dirtychange...</div><div class="long"><p>Checks the <a href="Ext.form.field.Field.html#isDirty" rel="Ext.form.field.Field#isDirty" class="docClass">isDirty</a> state of the field and if it has changed since the last time
it was checked, fires the <a href="Ext.form.field.Field.html#dirtychange" rel="Ext.form.field.Field#dirtychange" class="docClass">dirtychange</a> event.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-extractFileInput" class="member ni"><a href="Ext.form.field.Field.html#method-extractFileInput" rel="method-extractFileInput" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-extractFileInput" class="viewSource">view source</a></div><a name="extractFileInput"></a><a name="method-extractFileInput"></a><a href="Ext.form.field.Field.html#" rel="method-extractFileInput" class="cls expand">extractFileInput</a> : HTMLInputElement</div><div class="description"><div class="short">Only relevant if the instance's isFileUpload method returns true. Returns a reference
to the file input DOM element h...</div><div class="long"><p>Only relevant if the instance's <a href="Ext.form.field.Field.html#isFileUpload" rel="Ext.form.field.Field#isFileUpload" class="docClass">isFileUpload</a> method returns true. Returns a reference
to the file input DOM element holding the user's selected file. The input will be appended into
the submission form and will not be returned, so this method should also create a replacement.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLInputElement</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-getErrors" class="member ni"><a href="Ext.form.field.Field.html#method-getErrors" rel="method-getErrors" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-getErrors" class="viewSource">view source</a></div><a name="getErrors"></a><a name="method-getErrors"></a><a href="Ext.form.field.Field.html#" rel="method-getErrors" class="cls expand">getErrors</a>(
<span class="pre">Mixed value</span>)
 : Array</div><div class="description"><div class="short">Runs this field's validators and returns an array of error messages for any validation failures.
This is called inter...</div><div class="long"><p>Runs this field's validators and returns an array of error messages for any validation failures.
This is called internally during validation and would not usually need to be used manually.</p>


<p>Each subclass should override or augment the return value to provide their own errors.</p>

<h3 class="pa">Parameters</h3><ul><li><span class="pre">value</span> : Mixed<div class="sub-desc"><p>The value to get errors for (defaults to the current field value)</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Array</span>&nbsp; &nbsp;<p>All error messages for this field; an empty Array if none.</p>
</li></ul></div></div></div><div id="method-getModelData" class="member ni"><a href="Ext.form.field.Field.html#method-getModelData" rel="method-getModelData" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-getModelData" class="viewSource">view source</a></div><a name="getModelData"></a><a name="method-getModelData"></a><a href="Ext.form.field.Field.html#" rel="method-getModelData" class="cls expand">getModelData</a> : Object</div><div class="description"><div class="short">Returns the value(s) that should be saved to the Ext.data.Model instance for this field, when
Ext.form.Basic.updateRe...</div><div class="long"><p>Returns the value(s) that should be saved to the <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Ext.data.Model</a> instance for this field, when
<a href="Ext.form.Basic.html#updateRecord" rel="Ext.form.Basic#updateRecord" class="docClass">Ext.form.Basic.updateRecord</a> is called. Typically this will be an object with a single name-value
pair, the name being this field's <a href="Ext.form.field.Field.html#getName" rel="Ext.form.field.Field#getName" class="docClass">name</a> and the value being its current data value. More
advanced field implementations may return more than one name-value pair. The returned values will be
saved to the corresponding field names in the Model.</p>


<p>Note that the values returned from this method are not guaranteed to have been successfully
<a href="Ext.form.field.Field.html#validate" rel="Ext.form.field.Field#validate" class="docClass">validated</a>.</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>A mapping of submit parameter names to values; each value should be a string, or an array
of strings if that particular name has multiple values. It can also return <tt>null</tt> if there are no
parameters to be submitted.</p>
</li></ul></div></div></div><div id="method-getName" class="member ni"><a href="Ext.form.field.Field.html#method-getName" rel="method-getName" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-getName" class="viewSource">view source</a></div><a name="getName"></a><a name="method-getName"></a><a href="Ext.form.field.Field.html#" rel="method-getName" class="cls expand">getName</a> : String</div><div class="description"><div class="short">Returns the name attribute of the field. This is used as the parameter
name when including the field value in a form ...</div><div class="long"><p>Returns the <a href="Ext.form.field.Field.html#name" rel="Ext.form.field.Field#name" class="docClass">name</a> attribute of the field. This is used as the parameter
name when including the field value in a <a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">form submit()</a>.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>name The field <a href="Ext.form.field.Field.html#name" rel="Ext.form.field.Field#name" class="docClass">name</a></p>
</li></ul></div></div></div><div id="method-getSubmitData" class="member ni"><a href="Ext.form.field.Field.html#method-getSubmitData" rel="method-getSubmitData" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-getSubmitData" class="viewSource">view source</a></div><a name="getSubmitData"></a><a name="method-getSubmitData"></a><a href="Ext.form.field.Field.html#" rel="method-getSubmitData" class="cls expand">getSubmitData</a> : Object</div><div class="description"><div class="short">Returns the parameter(s) that would be included in a standard form submit for this field. Typically this
will be an o...</div><div class="long"><p>Returns the parameter(s) that would be included in a standard form submit for this field. Typically this
will be an object with a single name-value pair, the name being this field's <a href="Ext.form.field.Field.html#getName" rel="Ext.form.field.Field#getName" class="docClass">name</a> and the
value being its current stringified value. More advanced field implementations may return more than one
name-value pair.</p>


<p>Note that the values returned from this method are not guaranteed to have been successfully
<a href="Ext.form.field.Field.html#validate" rel="Ext.form.field.Field#validate" class="docClass">validated</a>.</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>A mapping of submit parameter names to values; each value should be a string, or an array
of strings if that particular name has multiple values. It can also return <tt>null</tt> if there are no
parameters to be submitted.</p>
</li></ul></div></div></div><div id="method-getValue" class="member ni"><a href="Ext.form.field.Field.html#method-getValue" rel="method-getValue" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-getValue" class="viewSource">view source</a></div><a name="getValue"></a><a name="method-getValue"></a><a href="Ext.form.field.Field.html#" rel="method-getValue" class="cls expand">getValue</a> : Mixed</div><div class="description"><div class="short">Returns the current data value of the field. The type of value returned is particular to the type of the
particular f...</div><div class="long"><p>Returns the current data value of the field. The type of value returned is particular to the type of the
particular field (e.g. a Date object for <a href="Ext.form.field.Date.html" rel="Ext.form.field.Date" class="docClass">Ext.form.field.Date</a>).</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Mixed</span>&nbsp; &nbsp;<p>value The field value</p>
</li></ul></div></div></div><div id="method-initField" class="member ni"><a href="Ext.form.field.Field.html#method-initField" rel="method-initField" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-initField" class="viewSource">view source</a></div><a name="initField"></a><a name="method-initField"></a><a href="Ext.form.field.Field.html#" rel="method-initField" class="cls expand">initField</a> : void</div><div class="description"><div class="short">Initializes this Field mixin on the current instance. Components using this mixin should call
this method during thei...</div><div class="long"><p>Initializes this Field mixin on the current instance. Components using this mixin should call
this method during their own initialization process.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-isDirty" class="member ni"><a href="Ext.form.field.Field.html#method-isDirty" rel="method-isDirty" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-isDirty" class="viewSource">view source</a></div><a name="isDirty"></a><a name="method-isDirty"></a><a href="Ext.form.field.Field.html#" rel="method-isDirty" class="cls expand">isDirty</a> : Boolean</div><div class="description"><div class="short">Returns true if the value of this Field has been changed from its originalValue.
Will always return false if the fiel...</div><div class="long"><p>Returns true if the value of this Field has been changed from its <a href="Ext.form.field.Field.html#originalValue" rel="Ext.form.field.Field#originalValue" class="docClass">originalValue</a>.
Will always return false if the field is disabled.</p>


<p>Note that if the owning <a href="Ext.form.Basic.html" rel="Ext.form.Basic" class="docClass">form</a> was configured with
<a href="Ext.form.Basic.html#trackResetOnLoad" rel="Ext.form.Basic#trackResetOnLoad" class="docClass">trackResetOnLoad</a>
then the <a href="Ext.form.field.Field.html#originalValue" rel="Ext.form.field.Field#originalValue" class="docClass">originalValue</a> is updated when the values are loaded by
<a href="Ext.form.Basic.html" rel="Ext.form.Basic" class="docClass">Ext.form.Basic</a>.<a href="Ext.form.Basic.html#setValues" rel="Ext.form.Basic#setValues" class="docClass">setValues</a>.</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if this field has been changed from its original value (and
is not disabled), false otherwise.</p>
</li></ul></div></div></div><div id="method-isEqual" class="member ni"><a href="Ext.form.field.Field.html#method-isEqual" rel="method-isEqual" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-isEqual" class="viewSource">view source</a></div><a name="isEqual"></a><a name="method-isEqual"></a><a href="Ext.form.field.Field.html#" rel="method-isEqual" class="cls expand">isEqual</a>(
<span class="pre">Mixed value1, Mixed value2</span>)
 : Boolean</div><div class="description"><div class="short">Returns whether two field values are logically equal. Field implementations may override
this to provide custom compa...</div><div class="long"><p>Returns whether two field <a href="Ext.form.field.Field.html#getValue" rel="Ext.form.field.Field#getValue" class="docClass">values</a> are logically equal. Field implementations may override
this to provide custom comparison logic appropriate for the particular field's data type.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">value1</span> : Mixed<div class="sub-desc"><p>The first value to compare</p>
</div></li><li><span class="pre">value2</span> : Mixed<div class="sub-desc"><p>The second value to compare</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if the values are equal, false if inequal.</p>
</li></ul></div></div></div><div id="method-isFileUpload" class="member ni"><a href="Ext.form.field.Field.html#method-isFileUpload" rel="method-isFileUpload" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-isFileUpload" class="viewSource">view source</a></div><a name="isFileUpload"></a><a name="method-isFileUpload"></a><a href="Ext.form.field.Field.html#" rel="method-isFileUpload" class="cls expand">isFileUpload</a> : Boolean</div><div class="description"><div class="short">Returns whether this Field is a file upload field; if it returns true, forms will use
special techniques for submitti...</div><div class="long"><p>Returns whether this Field is a file upload field; if it returns true, forms will use
special techniques for <a href="Ext.form.Basic.html#submit" rel="Ext.form.Basic#submit" class="docClass">submitting the form</a> via AJAX. See
<a href="Ext.form.Basic.html#hasUpload" rel="Ext.form.Basic#hasUpload" class="docClass">Ext.form.Basic.hasUpload</a> for details. If this returns true, the <a href="Ext.form.field.Field.html#extractFileInput" rel="Ext.form.field.Field#extractFileInput" class="docClass">extractFileInput</a>
method must also be implemented to return the corresponding file input element.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-isValid" class="member ni"><a href="Ext.form.field.Field.html#method-isValid" rel="method-isValid" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-isValid" class="viewSource">view source</a></div><a name="isValid"></a><a name="method-isValid"></a><a href="Ext.form.field.Field.html#" rel="method-isValid" class="cls expand">isValid</a> : Boolean</div><div class="description"><div class="short">Returns whether or not the field value is currently valid by validating the
field's current value. The validitychange...</div><div class="long"><p>Returns whether or not the field value is currently valid by <a href="Ext.form.field.Field.html#getErrors" rel="Ext.form.field.Field#getErrors" class="docClass">validating</a> the
field's current value. The <a href="Ext.form.field.Field.html#validitychange" rel="Ext.form.field.Field#validitychange" class="docClass">validitychange</a> event will not be fired; use <a href="Ext.form.field.Field.html#validate" rel="Ext.form.field.Field#validate" class="docClass">validate</a>
instead if you want the event to fire. <b>Note</b>: <a href="Ext.form.field.Field.html#disabled" rel="Ext.form.field.Field#disabled" class="docClass">disabled</a> fields are always treated as valid.</p>


<p>Implementations are encouraged to ensure that this method does not have side-effects such as
triggering error message display.</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if the value is valid, else false</p>
</li></ul></div></div></div><div id="method-reset" class="member ni"><a href="Ext.form.field.Field.html#method-reset" rel="method-reset" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-reset" class="viewSource">view source</a></div><a name="reset"></a><a name="method-reset"></a><a href="Ext.form.field.Field.html#" rel="method-reset" class="cls expand">reset</a> : void</div><div class="description"><div class="short">Resets the current field value to the originally loaded value and clears any validation messages.
See Ext.form.Basic....</div><div class="long"><p>Resets the current field value to the originally loaded value and clears any validation messages.
See <a href="Ext.form.Basic.html" rel="Ext.form.Basic" class="docClass">Ext.form.Basic</a>.<a href="Ext.form.Basic.html#trackResetOnLoad" rel="Ext.form.Basic#trackResetOnLoad" class="docClass">trackResetOnLoad</a></p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-resetOriginalValue" class="member ni"><a href="Ext.form.field.Field.html#method-resetOriginalValue" rel="method-resetOriginalValue" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-resetOriginalValue" class="viewSource">view source</a></div><a name="resetOriginalValue"></a><a name="method-resetOriginalValue"></a><a href="Ext.form.field.Field.html#" rel="method-resetOriginalValue" class="cls expand">resetOriginalValue</a> : void</div><div class="description"><div class="short">Resets the field's originalValue property so it matches the current value.
This is called by Ext.form.Basic.setValues...</div><div class="long"><p>Resets the field's <a href="Ext.form.field.Field.html#originalValue" rel="Ext.form.field.Field#originalValue" class="docClass">originalValue</a> property so it matches the current <a href="Ext.form.field.Field.html#getValue" rel="Ext.form.field.Field#getValue" class="docClass">value</a>.
This is called by <a href="Ext.form.Basic.html" rel="Ext.form.Basic" class="docClass">Ext.form.Basic</a>.<a href="Ext.form.Basic.html#setValues" rel="Ext.form.Basic#setValues" class="docClass">setValues</a> if the form's
<a href="Ext.form.Basic.html#trackResetOnLoad" rel="Ext.form.Basic#trackResetOnLoad" class="docClass">trackResetOnLoad</a> property is set to true.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
</li></ul></div></div></div><div id="method-setValue" class="member ni"><a href="Ext.form.field.Field.html#method-setValue" rel="method-setValue" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-setValue" class="viewSource">view source</a></div><a name="setValue"></a><a name="method-setValue"></a><a href="Ext.form.field.Field.html#" rel="method-setValue" class="cls expand">setValue</a>(
<span class="pre">Mixed value</span>)
 : Ext.form.field.Field</div><div class="description"><div class="short"><p>Sets a data value into the field and runs the change detection and validation.</p>
</div><div class="long"><p>Sets a data value into the field and runs the change detection and validation.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">value</span> : Mixed<div class="sub-desc"><p>The value to set</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.form.field.Field</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-validate" class="member ni"><a href="Ext.form.field.Field.html#method-validate" rel="method-validate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-method-validate" class="viewSource">view source</a></div><a name="validate"></a><a name="method-validate"></a><a href="Ext.form.field.Field.html#" rel="method-validate" class="cls expand">validate</a> : Boolean</div><div class="description"><div class="short">Returns whether or not the field value is currently valid by validating the
field's current value, and fires the vali...</div><div class="long"><p>Returns whether or not the field value is currently valid by <a href="Ext.form.field.Field.html#getErrors" rel="Ext.form.field.Field#getErrors" class="docClass">validating</a> the
field's current value, and fires the <a href="Ext.form.field.Field.html#validitychange" rel="Ext.form.field.Field#validitychange" class="docClass">validitychange</a> event if the field's validity has
changed since the last validation. <b>Note</b>: <a href="Ext.form.field.Field.html#disabled" rel="Ext.form.field.Field#disabled" class="docClass">disabled</a> fields are always treated as valid.</p>


<p>Custom implementations of this method are allowed to have side-effects such as triggering error
message display. To validate without side-effects, use <a href="Ext.form.field.Field.html#isValid" rel="Ext.form.field.Field#isValid" class="docClass">isValid</a>.</p>

<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;<p>True if the value is valid, else false</p>
</li></ul></div></div></div></div><div class="m-events"><a name="events"></a><div class="definedBy">Defined By</div><h3 class="evt p">Events</h3><div id="event-change" class="member f ni"><a href="Ext.form.field.Field.html#event-change" rel="event-change" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-event-change" class="viewSource">view source</a></div><a name="change"></a><a name="event-change"></a><a href="Ext.form.field.Field.html#" rel="event-change" class="cls expand">change</a>(
<span class="pre">Ext.form.field.Field this, Mixed newValue, Mixed oldValue</span>)
</div><div class="description"><div class="short"><p>Fires when a user-initiated change is detected in the value of the field.</p>
</div><div class="long"><p>Fires when a user-initiated change is detected in the value of the field.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">this</span> : Ext.form.field.Field<div class="sub-desc">
</div></li><li><span class="pre">newValue</span> : Mixed<div class="sub-desc"><p>The new value</p>
</div></li><li><span class="pre">oldValue</span> : Mixed<div class="sub-desc"><p>The original value</p>
</div></li></ul></div></div></div><div id="event-dirtychange" class="member ni"><a href="Ext.form.field.Field.html#event-dirtychange" rel="event-dirtychange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-event-dirtychange" class="viewSource">view source</a></div><a name="dirtychange"></a><a name="event-dirtychange"></a><a href="Ext.form.field.Field.html#" rel="event-dirtychange" class="cls expand">dirtychange</a>(
<span class="pre">Ext.form.field.Field this, Boolean isDirty</span>)
</div><div class="description"><div class="short"><p>Fires when a change in the field's <a href="Ext.form.field.Field.html#isDirty" rel="Ext.form.field.Field#isDirty" class="docClass">isDirty</a> state is detected.</p>
</div><div class="long"><p>Fires when a change in the field's <a href="Ext.form.field.Field.html#isDirty" rel="Ext.form.field.Field#isDirty" class="docClass">isDirty</a> state is detected.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">this</span> : Ext.form.field.Field<div class="sub-desc">
</div></li><li><span class="pre">isDirty</span> : Boolean<div class="sub-desc"><p>Whether or not the field is now dirty</p>
</div></li></ul></div></div></div><div id="event-validitychange" class="member ni"><a href="Ext.form.field.Field.html#event-validitychange" rel="event-validitychange" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.form.field.Field.html" class="definedIn docClass">Ext.form.field.Field</a><br/><a href="../source/Field.html#Ext-form.field.Field-event-validitychange" class="viewSource">view source</a></div><a name="validitychange"></a><a name="event-validitychange"></a><a href="Ext.form.field.Field.html#" rel="event-validitychange" class="cls expand">validitychange</a>(
<span class="pre">Ext.form.field.Field this, Boolean isValid</span>)
</div><div class="description"><div class="short"><p>Fires when a change in the field's validity is detected.</p>
</div><div class="long"><p>Fires when a change in the field's validity is detected.</p>
<h3 class="pa">Parameters</h3><ul><li><span class="pre">this</span> : Ext.form.field.Field<div class="sub-desc">
</div></li><li><span class="pre">isValid</span> : Boolean<div class="sub-desc"><p>Whether or not the field is now valid</p>
</div></li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>